import { TabBar } from 'antd-mobile'
import {useHistory,useLocation} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

const Bottom = () => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value) => {
      history.push(value)
    }
  
    const tabs = [
      {
        key: '/',
        title: '首页',
        icon: <AppOutline />,
      },
      {
        key: '/collection',
        title: '我的收藏',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/publish',
        title: '发布',
        icon: <MessageOutline />,
      },
      {
        key: '/message',
        title: '我的消息',
        icon: <MessageOutline />,
      },
      {
        key: '/me',
        title: '个人中心',
        icon: <UserOutline />,
      },
    ]
  
    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
          {
            tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))
          }
        </TabBar>
    )
}

export default Bottom;